<template>
  <view class="mine-container">
    <view class="status_bar"><!-- 这里是状态栏 --></view>
    <view class="nav-bar">
      <image src="@/static/svg-icon/message.svg" />
      <image src="@/static/svg-icon/setting.svg" />
    </view>
    <view class="header" v-if="userInfo">
      <image class="avatar" :src="userInfo.avatar" />
      <view class="info">
        <view class="h2">{{ userInfo.realName }}</view>
        <view class="h3">{{ userInfo.roleNames }}</view>
      </view>
    </view>
    <c-bar-button label="所属部门">
      <view style="color:#878787;font-size: 12px;" slot="right">生产部</view>
    </c-bar-button>
    <u-gap height="10"></u-gap>

    <c-bar-button label="更改密码"></c-bar-button>
    <u-gap height="10"></u-gap>

    <c-bar-button label="关于"></c-bar-button>
    <c-bar-button label="帮助与反馈" borderTop></c-bar-button>
    <u-gap height="10"></u-gap>

    <u-button class="logout-button" @click="logoutVisible = true">退出登录</u-button>

    <u-modal
      content="确认退出登录吗？"
      :show="logoutVisible"
      @confirm="logout"
      @cancel="logoutVisible = false"
      @close="logoutVisible = false"
      asyncClose
      closeOnClickOverlay
      showCancelButton
    ></u-modal>
  </view>
</template>

<script setup>
import { computed, ref } from '@vue/composition-api'
import { userLogout } from '@/api/modules/user.api.js'
import store from '@/store/index.js'

const userInfo = computed(() => store.state.user.userInfo)

const logoutVisible = ref(false)

async function logout() {
  try {
    store.dispatch('user/logout')
  } catch (e) {
    console.log('退出登录')
  }
  logoutVisible.value = false
}
</script>

<style lang="scss">
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}
.mine-container {
  width: 100vw;
  min-height: 100vh;
  .nav-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 20px;
    background-color: #fff;
    height: 44px;
    border-bottom: 1px solid $uni-border-color;
    image {
      width: 22px;
      margin-left: 10px;
    }
  }
  .header {
    display: flex;
    padding: 24px;
    background-color: #fff;
    .avatar {
      height: 70px;
      width: 70px;
      border-radius: 50%;
      border: 1px solid #666;
      margin-right: 16px;
    }
    .h2 {
      font-size: 18px;
      color: #101010;
      margin-bottom: 10px;
      line-height: 28px;
    }
    .h3 {
      font-size: 14px;
      color: #666666;
      margin-bottom: 10px;
    }
  }
}
.logout-button {
  color: #ff0000;
  border-radius: 0;
  border: none;
}
</style>
